<template>
    <div style="padding: 10px">
      <div class="headerBoxList">
        <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="14" width="36" height="20" rx="2" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 20H44C45.1046 20 46 20.8954 46 22V26C46 27.1046 45.1046 28 44 28H42V20Z" fill="#333"/><path d="M13 21V27" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M19 21V27" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M25 21V27" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M31 24V27" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <span style="margin-left: 10px">电量状态 </span>
      </div>
      <div class="contentBoxYY" style="">
        <!-- <el-collapse v-model="activeName" accordion>
          <el-collapse-item style="" v-for="(item,index) in listData" :key="index" :title="item" :name="index">
              <div style="background: #282828;color: rgb(101, 177, 235);padding-left:20px;border: none !important;" v-for="(data,j) in item.content" :key="j">
                    
              </div>
          </el-collapse-item>
        </el-collapse> -->
        <div class="itemFather" style="min-height: 40px;font-size: 18px;border-bottom: 1px solid #e9e9e9;line-height: 40px;" v-for="(item,index) in list" :key="index">
          <img src="../../../../assets/dianchi.png" width="60" style="margin-right: 10px;" alt="">
          <div>
            <div>AC供电：{{item.ACpowered}}</div>
            <div>充电计量：{{item.ChargCounter}}</div>
            <div>最大充电电流：{{item.MaxCharginCurrent}}</div>
            <div>最大充电电压：{{item.MaxChargingVoltage}}</div>
            <div>USB供电：{{item.USBpowered}}</div>
            <div>Wirelesspowered：{{item.Wirelesspowered}}</div>
            <div>cnt：{{item.cnt}}</div>
            <div>health：{{item.health}}</div>
          </div>
          <div style="margin-left: 30px;">
            <div>id：{{item.id}}</div>
            <div>现在电量有xx%：{{item.level}}</div>
            <div>present：{{item.present}}</div>
            <div>scale：{{item.scale}}</div>
            <div>状态：{{item.status==2?'充电':'放电'}}</div>
            <div>电池类型：{{item.technology}}</div>
            <div>温度：{{item.temperature}}</div>
            <div>电压：{{item.voltage}}</div>
          </div>
        </div>
        
      </div>
      <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="offset"
      :page-size="limit"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
    </div>
</template>

  <script>
  import { getPhoneInFoApi } from '@/api/phoneInfo/index'
  export default {
    name: "Battery",
    props:['sendData'],
    data() {
      return {
        activeName: 1,
        listData:[],
        list:[],
        total:0,
        offset:1,
        limit:10
      };
    },
    mounted(){
      // this.initFunction();
    },
    watch:{
    '$store.state.account.basePhone':function(){
      this.initFunction();
    }
  },
    created() {
      this.initFunction();
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.offset = val;
        this.initFunction();
      },
      initFunction() {
        // console.log(this.sendData.href)
        let api = '/'+this.sendData.href;
        let data = {
                proof_num:this.sendData.proof_num,
                offset:this.offset,
                limit:this.limit
            }
        getPhoneInFoApi(data,api).then(res=>{
          this.list = res.data;
          this.total = Number(this.sendData.cnt);
        }).catch(error=>{

        })
      },
    },
  };
  </script>
  
  <style scoped>
  .itemFather{
    display: flex;
    align-items: center;
    border: 1px solid rgb(210, 210, 210);
    padding: 10px 0;
    border-radius: 5px;
  }
  .itemFather>div>div{
    font-size: 14px;
    line-height: 16px;
  }
  .headerBoxList {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #d2d2d2;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
  }
  .contentBoxYY{
      width: 100%; 
      margin: 0 auto;
      overflow: hidden;
      height:83vh;
      overflow-y: auto;
      overflow-x: hidden;
  }
  @media screen and (min-width: 2360px) {
      .contentBoxYY{
          width: 95%; 
          margin: 0 auto;
          overflow: hidden;
          height:79vh;
          overflow-y: auto;
          overflow-x: hidden;
      }
  }
  @media screen and (min-width: 2561px) {
      .contentBoxYY{
          width: 95%; 
          margin: 0 auto;
          overflow: hidden;
          height:64vh;
          overflow-y: auto;
          overflow-x: hidden;
      }
  }
  
  </style>